<template>
  <main class="c-topic">
    <div v-if="media">
      <section class="c-topic_item" v-if="liveStatus===0">
        <div class="c-topic_brand viewmedia" :style="mediaBigPic">
          <img :src="media.poster" class= "toptic-media " >
        </div>
        <div class="brand-expand" :class="{ active: media.isChargeable }">
          <span class="reserve-text">当前预约人数 :</span>
          <span class="reserve-count">{{ media.liveOrderCount }}</span>
          <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1341920136992" class="reserve" :class="{ active: media.isChargeable }">
            {{ text }}
          </a>
        </div>      
        <div class="mes-box">
          <div class="countdown-info">
            <p class="text1" v-if="countDownCell && countDownCell.length > 0">距离 {{ media.startTime }} 开播还有<span class="play-countdown"> {{ filterDate(media.startTimestamp) }} </span>{{ countDownCell }}</p>
            <p class="text1" v-else> <span class="play-countdown">{{ filterDate(media.startTimestamp) }}</span> </p>
            <p class="text2"><span><i class="icon icon-address"></i>{{media.address}}</span></p>
          </div>
          <!-- <sharepage-intro :data="media.intro" ></sharepage-intro> -->
          <live-guests :data="{ guests: media.guests }"></live-guests>
        </div>
      </section>
      <whaley-living :media="media" v-else ></whaley-living>      
    </div>
    <div v-else class="err-tip-contain">
      <div class="spinner" v-if="loading"></div>        
      <p v-else>地址错误，请访问正确地址</p>
    </div>
    <global-footer></global-footer>       
  </main>
</template>
<script>
  import setFalse from 'ployfill/';
  import live from 'services/live';
  import { sharewx } from 'services/sharewx';
  import GlobalFooter from 'components/global-footer';
  import WhaleyLiving from 'pages/components/whaley-living';
  import SharepageIntro from 'pages/components/sharepage-intro';
  import LiveGuests from 'pages/components/live-guests';

  export default {
    components: { GlobalFooter, WhaleyLiving, SharepageIntro, LiveGuests },
    data () {
      return {
        media: null,
        mediaBigPic: {
          backgroundImage: ''
        },
        liveStatus: 0,
        countDownCell: '天',
        text: '预约',
        loading: true
      };
    },
    computed: {
      byteSize () {
        const contentWidth = document.documentElement.clientWidth || document.body.clientWidth;
        return (contentWidth / 1080 * 36);
      }
    },
    mounted () {
      this.mesBox = this.getMesbox();
      live.get().then(data => {
        this.loading = false;
        if (data) {
          this.media = data;
          this.media.initIntro = data.intro;
          this.liveStatus = data.liveStatus;

          if (data.intro.length > Math.ceil((this.mesBox / this.byteSize) * 6)) {
            this.media.intro = data.intro.slice(0, Math.floor((this.mesBox / this.byteSize) * 6) - 10).concat('...');
          }
          this.text = !data.isChargeable ? '预约' : `购买观看劵  ¥${data.contentPackageQueryDtos ? (data.contentPackageQueryDtos.price / 100).toFixed(2) : data.price}`;
          sharewx({
            title: data.title,
            imgUrl: data.poster,
            desc: data.intro
          });
          this.mediaBigPic.backgroundImage = `url(${data.poster})`;
          document.title = `VR直播 | ${data.title}`;
          document.head.querySelector('meta[name="description"]').content = data.intro;
        } else {
          this.media = null;
        }
      }).catch(() => {
        this.loading = setFalse();
      });
    },
    methods: {
      getMesbox () {
        const contentWidth = document.documentElement.clientWidth || document.body.clientWidth;
        const mesbox = document.querySelector('.js-mesbox_mes');
        if (mesbox) {
          return mesbox.clientWidth;
        }
        return contentWidth;
      },
      filterDate (time) {
        const nowTime = new Date();
        const gapTime = ((new Date(time) - nowTime) / 1000).toFixed(2);
        const day = Math.floor(gapTime / (24 * 60 * 60));
        const hours = Math.floor(gapTime / (60 * 60));
        const minutes = Math.floor(gapTime / 60);
        if (day <= 0 && hours > 0) {
          this.countDownCell = '小时';
          return hours;
        }
        if (day <= 0 && hours <= 0 && minutes > 0) {
          this.countDownCell = '分钟';
          return minutes;
        }
        if (day <= 0 && hours <= 0 && minutes <= 0) {
          this.countDownCell = '';
          return '即将开始';
        }
        return day;
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "~common/style/variables";
  @import "~common/style/font";

  .brand-expand {
    position: relative;
    padding: .1rem .3rem 0;
    height: 1.8rem;
    background: $theme-color;
    &.active {
      background-color: $theme-redcolor;
    }
    span {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .reserve-text {
    font-size: .39rem;
    color: #fff;
  }
  .reserve-count {
    font-family: DINOT-Medium;
    font-size: .78rem;
    color: #fff;
    letter-spacing: .18rem;
  }
  .countdown-info {
    padding: .3rem 0;
    text-align: center;
    color: $font-color3;
    .text1 {
      font-size: .42rem;
    }
    .text2 {
      font-size: .36rem;
    }
    p {
      padding-bottom: .6rem;
    }
    .play-countdown {
      font-family: DINOT-Medium;
      color: $theme-redcolor;
    }
  }
  .reserve {
    position: absolute;
    right: .3rem;
    top: .4rem;
    font-size: .42rem;
    color: $theme-color;
    padding: .2rem .3rem;
    border-radius: .12rem;
    background: #fff;
    &.active {
      @include base-backgroundcolor(100%, .8);
      color: $theme-redcolor;
    }
  }

</style>
